<template>
  <Layout>
    <template #default>
      <div ref="mainContainer" class="main-container" v-loading="isLoading">
        <BlogDetail :blog="data" v-if="data"></BlogDetail>
        <BlogComment v-if="!isLoading"></BlogComment>
      </div>
    </template>
    <template #right>
      <div class="right-container" v-loading="isLoading">
        <BlogTOC :toc="data.toc" v-if="data"></BlogTOC>
      </div>
    </template>
  </Layout>
</template>

<script>
import fetchData from "@/mixins/fetchdata.js"
import {getBlog} from "@/api/blog";
import Layout from "@/components/Layout";
import BlogDetail from "./components/BlogDetail";
import BlogTOC from "./components/BlogTOC";
import BlogComment from "./components/BlogComment";
import mainScroll from "@/mixins/mainScroll.js";
import {titleControl} from "@/utils";

export default {
  name: "Detail",
  mixins: [fetchData(null), mainScroll("mainContainer")],
  data() {
    return {}
  },
  components: {
    Layout,
    BlogDetail,
    BlogTOC,
    BlogComment
  },
  methods: {
    async fetchData() {
      let resp = await getBlog(this.$route.params.id);
      if(!resp) {
        this.$router.push("/404");
        return ;
      }
      titleControl.setRouterTitle(resp.title);
      return resp;
    },
    // handleScroll(){
    //   this.$eventBus.$emit("mainScroll", this.$refs.mainContainer);
    // },
    // handleSetMainScroll(newScrollTop) {
    //   this.$refs.mainContainer.scrollTop = newScrollTop;
    // }
  },
  // mounted() {
  //   this.$refs.mainContainer.addEventListener("scroll", this.handleScroll);
  //   this.$eventBus.$on("setMainScroll", this.handleSetMainScroll);
  // },
  // beforeDestroy() {
  //   this.$eventBus.$emit("mainScroll")
  //   this.$refs.mainContainer.removeEventListener("scroll", this.handleScroll);
  //   this.$eventBus.$off("setMainScroll", this.handleSetMainScroll);
  // },
  updated() {
    const hash = location.hash;
    console.log(hash)
    location.hash = "";
    setTimeout(() => {
      location.hash = hash
    }, 50);
  }
};
</script>

<style lang="less" scoped>
.main-container {
  overflow-y: scroll;
  box-sizing: border-box;
  padding: 20px;
  height: 100%;
  position: relative;
  overflow-x:hidden ;
}
.right-container {
  width: 300px;
  height: 100%;
  overflow-y: scroll;
  box-sizing: border-box;
  position: relative;
  padding: 20px;
}
</style>
